import React from 'react'
import * as echarts from 'echarts';
import {useRef,useEffect,useState} from "react"
import {pieoption} from "../options/pieoption"
import {useDispatch,useSelector} from "react-redux"
import * as action from "../action"
function PieChart() {
    let myChart = null;
   let [buttonarr,setButtonarr] = useState([
       "按钮1","按钮2","按钮3"
   ])
   let dispatch = useDispatch()
   let store = useSelector((state)=>{
        return {
            ...state.appreducer
        }  
   })
   let btnfn = ()=>{
    dispatch(action.getlist())
   }
   let changePie = (arr)=>{
       dispatch(action.changepie(arr))
   }
   let piechart = useRef(null)
   useEffect(()=>{
        dispatch(action.getlist())
        console.log(store.arr,"arr");
        return ()=>{ // useEffect里返回的函数代表着componetwillunmount,组件卸载的时候卸载掉echarts实例
            myChart.dispose()
        }
      
   },[])
   useEffect(()=>{
    pieoption.series[0].radius = store.radius
    pieoption.series[0].data = store.arr
    myChart = echarts.init(piechart.current)
    pieoption && myChart.setOption(pieoption);
    
    
   },[store.arr,store.radius])
  return (
      <div>
           {
               buttonarr && buttonarr.length ? buttonarr.map((item,index)=>{
                   return <button key={index} style={{marginLeft:"30px"}} onClick={btnfn}>{item}</button>
               }):""
           }
           <button onClick={()=>changePie(["30%","50%"])}>点我切换环形图</button> <button onClick={()=>changePie(["50%"])}>点我切换饼状图</button>
           <div ref={piechart} style={{width:"100%",height:"375px"}} ></div>
      </div>
   
  )
}

export default PieChart